<template>
	<view>
		<view class="top" @click="searchShow()">
			<u-search shape="round" placeholder="输入关键词进行搜索" :show-action="false"></u-search>
		</view>
		<view class="top2">
			<u-tabs :list="tabList" :current="current" lineWidth="40" lineColor="#FE4030" :activeStyle="{
		    color: '#333333',
		    fontWeight: 'bold',
		}" :inactiveStyle="{
		    color: '#333333',
		}" itemStyle="height:88rpx;font-size:30rpx;width:182rpx;" @change="change"></u-tabs>
		</view>
		<view class="list">
			<view class="item" v-for="i in 9">
				<view>
					<image v-if="i==0" src="../../../static/data/one.png"></image>
					<image v-else-if="i==1" src="../../../static/data/two.png"></image>
					<image v-else-if="i==2" src="../../../static/data/three.png"></image>
					<text v-else>{{i+1}}</text>
				</view>
				<view>
					<image src="../../../static/logo.png"></image>
					<text>用户昵称</text>
				</view>
				<view>9</view>
			</view>
		</view>
		<u-popup :show="showyy" closeOnClickOverlay mode="top" round="8" @close="showyy=false">
			<view class="showBlock">
				<view>所属分销:<text @click="show2 = true">{{fxname}}</text></view>
				<view>团品开始日期:<text @click="show = true">{{startTime}}</text></view>
			
				<view class="btn">
					<text @click="reset()">重置</text>
					<text @click="search()">搜索</text>
				</view>
			</view>
		</u-popup>
		<u-picker :show="show2" :columns="columns2" @confirm="confirm2" @cancel="cancelChoose2"></u-picker>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value" mode="date" :formatter="formatter"
			@confirm="confirm" @cancel="cancel"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				tabList: [{
					name: '序号'
				}, {
					name: '分销名称'
				}, {
					name: '单量'
				}],
				current: 0,
				showyy: false,
				columns2: [
					['中国', '美国', '日本']
				],
				show2: false,
				fxname: '请选择分销名称',
				startTime: '请选择团品开始日期',
				value: Number(new Date()),
				show: false,
			}
		},
		methods: {
			change(e) {
				console.log(e)
				this.current = e.index
			},
			searchShow() {
				console.log('666666')
				this.showyy = true
			},
			confirm2(e) {
				console.log('confirm', e.value)
				this.show2 = false
				this.fxname = e.value

			},
			cancelChoose2() {
				this.show2 = false
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				console.log(e.value);
				const timeFormat = uni.$u.timeFormat;
				console.log(timeFormat(e.value, 'yyyy-mm-dd'));
				this.startTime = timeFormat(e.value, 'yyyy-mm-dd')
			
			},
			reset(){
				this.showyy=false
			},
			search(){
				this.showyy=false
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 682rpx;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.top2 {
		width: 682rpx;
		height: auto;
		margin: 0 auto;
		margin-top: 32rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.list {
		width: 682rpx;
		height: auto;
		margin: 0 auto;
		margin-top: 32rpx;

		.item {
			width: 100%;
			height: 140rpx;
			background-color: #F9F9F9;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;

			view {
				width: auto;
				height: auto;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin: 20rpx 10rpx;
					float: left;
				}

				text {
					display: inline-block;
					line-height: 140rpx;
				}
			}

			view:first-child {
				width: 50rpx;
				text-align: center;
				line-height: 140rpx;

				text {
					width: 42rpx;
					height: 42rpx;
					border-radius: 50%;
					background-color: #ffffff;
					font-size: 26rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 42rpx;
					text-align: center;
				}

				image {
					width: 42rpx;
					height: 42rpx;
					margin-top: 49rpx;
				}
			}

			view:last-child {
				width: 200rpx;
				text-align: right;
				line-height: 140rpx;
			}
		}
	}
	.showBlock{
		width:auto;height:auto;padding: 20rpx;
		font-size: 24rpx;
		view{
			line-height:100rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			border-bottom: 1rpx solid #F5F5F5;;
		}
		view:last-child{
			border-bottom: none;
			margin-top: 100rpx;
		}
		.btn{
			width:90%;
			height: auto;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			text{
				width:300rpx;
				height:82rpx;
				line-height:82rpx;
				text-align: center;
				background-color: #FF3B06;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}
			text:first-child{
				width:300rpx;
				height:82rpx;
				line-height:82rpx;
				text-align: center;
				background-color:#F5F5F5;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #777777;
			}
		}
	}
</style>